<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Tiny, opensource, Bootstrap WYSIWYG rich text editor from MindMup</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="keywords" content="opensource rich wysiwyg text editor jquery bootstrap execCommand html5"/>
    <meta name="description"
          content="This tiny jQuery Bootstrap WYSIWYG plugin turns any DIV into a HTML5 rich text editor"/>

    <link rel="stylesheet" href="/css/bootstrap-3.3.0-dist/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/bootstrap-3.3.0-dist/dist/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="/css/font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/bootstrap-wysiwyg-master/external/google-code-prettify/prettify.css"/>


    <script src="/js/jqm1.11.2.js"></script>
    <script src="/js/upf.js"></script>
    <script src="external/jquery.hotkeys.js"></script>
    <script src="/css/bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script>
    <script src="external/google-code-prettify/prettify.js"></script>
    <link href="my-index.css" rel="stylesheet">
    <script src="my-bootstrap-wysiwyg.js"></script>
</head>
<body>

<div class="container">
    <div class="hero-unit">
        <h1>bootstrap-wysiwyg <br/>
            <small>tiny wysiwyg rich text editor for Bootstrap</small>
        </h1>
        <hr/>
        <!---
        Please read this before copying the toolbar:

        * One of the best things about this widget is that it does not impose any styling on you, and that it allows you
        * to create a custom toolbar with the options and functions that are good for your particular use. This toolbar
        * is just an example - don't just copy it and force yourself to use the demo styling. Create your own. Read
        * this page to understand how to customise it:
        * https://github.com/mindmup/bootstrap-wysiwyg/blob/master/README.md#customising-
        --->
        <div id="alerts"></div>



        <div id="editor" class="lmedit auto-fix">Go ahead</div>
        <hr>
        <textarea name="" id="showcontent" cols="30" rows="10" style="width: 100%"></textarea>
    </div>


</div>
<script>
    $(function () {
        $('#editor').wysiwyg({
            'editbar':['bold','italic','strikethrough','underline','ol','ul','justifyleft','justifycenter','justifyright','justifyfull',
            'link','insertpic','undo','redo','fontsize','title','hr','quote',
            ],//配置editbar的参数
            'upf_fact':"/bootstrap-wysiwyg-master/upf.php",//配置图片上传处理脚本。
        });
//        window.prettyPrint && prettyPrint();
    });



    function upcontent()
    {
        $('#showcontent').html($('#editor').gethtml());
    }
    setInterval("upcontent()",500);
</script>
<div id="fb-root"></div>

</body>
</html>
